<template>
  <div class="sc-list-table">
    <el-card class="box-card">
      <el-table
        ref="ListTableOne"
        v-loading="loading"
        :max-height="540"
        :border="true"
        :data="listData"
        :header-cell-style="{ backgroundColor: bgcolor ? bgcolor : '#d3dbeb' }"
        :row-style="{ backgroundColor: bgcolor }"
        @row-click="rowHandler"
        @selection-change="handleSelectionChange"
      >
        <ListTableItem v-for="(item, index) in tableCol" :key="index" :attrs="item" :align-item="alignItem">
          <template v-if="item.custom" :slot="item.custom" slot-scope="scope">
            <slot :name="item.custom" v-bind="scope"></slot>
          </template>
        </ListTableItem>
      </el-table>
      <div v-if="page" class="sc-list-table-pager">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          style="text-align: center;"
          :current-page="pagerData.pageIndex"
          :total="pagerData.count"
          :page-size="pagerData.pageSize"
          :page-sizes="[10, 20, 30, 40, 50]"
          @current-change="pageChange"
          @size-change="pageSizeChange"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
  import ListTableItem from './components/ListTableItem'
  import request from '@/utils/request'
  import { mapGetters } from 'vuex'
  export default {
    components: {
      ListTableItem
    },
    props: {
      hed: {
        type: String,
        default() {
          return ''
        }
      },
      bgcolor: {
        type: String,
        default() {
          return ''
        }
      },
      page: {
        type: Boolean,
        default() {
          return true
        }
      },
      loading: {
        type: Boolean,
        default() {
          return false
        }
      },
      tableData: {
        type: Array,
        default() {
          return []
        }
      },
      tableCol: {
        type: Array,
        default() {
          return []
        }
      },
      pager: {
        type: Object,
        default() {
          return {}
        }
      },
      noQuery: {
        type: Boolean,
        default() {
          return false
        }
      },
      alignItem: {
        type: String,
        default() {
          return ''
        }
      }
    },
    data() {
      return {
        listData: [],
        ary: false,
        pagerData: {
          pageIndex: 1,
          count: 0,
          pageSize: 10,
          ...this.pager
        },
        // 是否使用接口查询
        interfaceSwitch: false,
        interfaceUrl: ''
      }
    },
    computed: {
      ...mapGetters(['attendanceDate', 'serchObj'])
    },
    watch: {
      tableData: function (newValue, oldValue) {
        this.listData = newValue
      }
    },

    methods: {
      rowHandler(row, column, event) {
        this.$emit('rowClick', row, column, event)
      },
      handleSelectionChange(event) {
        this.$emit('selectChange', event)
      },
      async setQuery(query) {
        query = Object.assign({ search: [] }, this.serchObj, query)
        if (this.interfaceSwitch) {
          let res = await request(this.interfaceUrl, 'GET', query)
          this.listData = res.data.items
        } else {
          await this.$store.dispatch('user/setSerchObj', query)
        }
      },
      pageSizeChange(pageSize) {
        this.pagerData.pageSize = pageSize
        this.$emit('size-change', pageSize)
        if (this.noQuery === false) {
          const tmpObj = this.attendanceDate.status
            ? {
              pageIndex: this.pagerData.pageIndex,
              pageSize,
              orderBy: 'createdTime',
              orderByAscent: false,
              EnterTimeStart: this.attendanceDate.EnterTimeStart,
              EnterTimeEnd: this.attendanceDate.EnterTimeEnd
            }
            : {
              pageIndex: this.pagerData.pageIndex,
              pageSize,
              orderBy: 'createdTime',
              orderByAscent: false
            }
          this.setQuery(tmpObj)
        }
      },
      pageChange(pageIndex) {
        this.pagerData.pageIndex = pageIndex
        this.$emit('page-change', pageIndex)

        if (this.noQuery === false) {
          const tmpObj = this.attendanceDate.status
            ? {
              pageIndex,
              pageSize: this.pagerData.pageSize,
              orderBy: 'createdTime',
              orderByAscent: false,
              EnterTimeStart: this.attendanceDate.EnterTimeStart,
              EnterTimeEnd: this.attendanceDate.EnterTimeEnd
            }
            : {
              pageIndex,
              pageSize: this.pagerData.pageSize,
              orderBy: 'createdTime',
              orderByAscent: false
            }
          this.setQuery(tmpObj)

        }
      },
      update({ page, count }, url = false) {
        if (url) {
          this.interfaceSwitch = true
          this.interfaceUrl = url
        }
        this.pagerData.pageIndex = page
        this.pagerData.count = count
        if (this.noQuery === false) {
          const { pageSize } = this.serchObj
          if (pageSize) this.pagerData.pageSize = this._.toSafeInteger(pageSize)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box-card {
    ::v-deep.el-card__header {
      padding: 0px;
    }
    ::v-deep.el-card__body {
      padding: 0px;
    }
  }
  .sc-list-table-pager {
    margin-bottom: 20px;
    ::v-deep.active {
      background-color: #254c99 !important;
      color: #fff;
    }

    .el-pagination {
      ::v-deep .el-pagination__sizes {
        .el-input.is-focus {
          .el-input__inner {
            border-color: #254c99;
          }
          .el-input__inner:hover {
            border-color: #254c99;
          }
        }
        .el-input {
          .el-input__inner:hover {
            border-color: #254c99;
          }
          .el-input__inner:focus {
            border-color: #254c99;
          }
        }
      }
      ::v-deep .el-pagination__jump {
        .el-input {
          .el-input__inner:focus {
            border-color: #254c99;
          }
        }
      }
    }
  }
</style>
